<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--
        	 通过表单的id属性，获取要校验的表单  $("#id").validate({});
		 使用表单的jQuery对象调用一个校验表单的函数validate
		 rulues:定义的校验规则
		 firstname:使用input标签的name的属性值，获取到要校验的标签
		 required：校验的规则，必须填写。
		 messages:不满足校验规则的错误提示信息。
		 
        -->
		
		<!--
        	1.要使用表单验证插件
        	 1.1必须引入jQuery的js文件
        	 1.2必须引入jQuery-validate的js文件。
        -->
        <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
       	<script type="text/javascript" src="../js/jquery.validate.js"></script>
       	<script type="text/javascript">
       		/*
       		 * 2.定义一个页面加载事件，让页面先加载完毕，再对表单经行校验。
       		 * 
       		 */
       		$(function(){
       			/*
       			 * 自定义校验规则：写在页面加载时间的里面，validate函数的外边
       			 * 格式：
       			 * 		属性		函数
       			 * $validator.addMethod("校验规则名称",function(value,element,params){})
       			 * 	校验规则名称：cardlength
       			 * function:
       			 * 		value:input标签的value属性值；文本输入框就是用户在页面中输入的内容
       			 * 		element:input标签对象
       			 * 		parames:自定义规则传递的参数，可以传递多个参数使用一个数组接收[15,18]
       			 */
       			$.validator.addMethod("cardlength",function(value,element,params){
//     				alert(value);//3 页面输入的内容
//     				alert(element);//[object HTMLInputElement]
//     				alert(params);//15，18
//     				return true;//校验成功，旅行，继续调用下一个规则
//					return false;//校验失败，阻止表单提交到服务器，给用户显示错误信息
					
					//判断用户在页面输入的内容value是否位15位或18位
					if(value.length!=params[0] && value.length!=params[1]){
						return false;
					}
					return true;//校验成功，旅行，继续调用下一个规则
       			});
       			/*
       			 * 定义身份证长度是15位，必须全是数字的校验规则
       			 */
       			$.validator.addMethod("card15",function(value,element,params){
       				//定义正则表达式
       				var reg = /^[0-9]{15}$/;
       				if(value.length==15){
       					return reg.test(value);//满足正则表达式的规则，放行；不满足正则表达式的规则，阻止提交服务器，显示提示信息。
       					
       				}
       				//不是15位，继续校验18位的身份证，放行。
       				return true;
       			});
       			/*
       			 * 长度18位，前17位全是数字，最后一位是X
       			 */
       			$.validator.addMethod("card18",function(value,element,params){
       				var reg = /^[0-9]{17}[0-9X]$/;
       				if(value.length==18){
       					return reg.test(value);
       				}
       				//不是18位，放行继续校验
       				return true;
       			});
       			//3.通过表单的id属性获取要校验的表单对象，调用表单校验插件中的validate函数。
       			$("#empForm").validate({
       				/*
       				 * rules:定义校验的规则
       				 * messages：定义不满足规则的错误提示信息。
       				 * 格式：
       				 * rules:{
       				 * 	标签的name属性值："校验的规则",(标签只有一个校验规则)
       				 * ......
       				 * 标签的name属性值："校验的规则"{
       				 * 		校验规则：校验规则的属性值，
       				 * 		校验规则：校验规则的属性值，
       				 * 		校验规则：校验规则的属性值，
       				 * 		...
       				 * 		校验规则：校验规则的属性值
       				 * },
       				 * messages{
       				 * 	标签的name属性值："校验的规则",(标签只有一个校验规则)
       				 * ......
       				 * 标签的name属性值："校验的规则"{
       				 * 		校验规则：校验规则的属性值，
       				 * 		校验规则：校验规则的属性值，
       				 * 		校验规则：校验规则的属性值，
       				 * 		...
       				 * 		校验规则：校验规则的属性值
       				 * }
       				 *
       				 *      
       				 * 		
       				 * 
       				 * }
       				 */
       				
       				rules:{
       					//昵称不能为空
       					realname:"required",
       					username:{
       						required:true,
       						//字符长度范围定义
       						rangelength:[5,8]
       					},
       					//密码不能为空，长度在6--12个字符或数组
       					pwd:{
       						required:true,
       						rangelength:[6,12]
       					},
       					//重置密码不能为空，长度在6--12个字符或数组，必须和密码一致
       					pwd2:{
       						required:true,
       						rangelength:[6,12],
       						//和密码相同，通过equalTo("#id")
       						equalTo:"#pwd"
       					},
       					//性别（必选其一）
       					gender:"required",
       					//年龄 26--50岁
       					age:{
       						required:true,
       						//年龄必须是整数
       						digits:true,
       						//年龄的范围26---50
       						range:[26,50]
       						
       					},
       					//必须选择一个学历
       					edu:"required",
       					//出生日期(1999/08/21)，必须填写 必须符合日期格式yyyy-MM-dd,日期必须合法
       					birthday:{
       						//必须填写 
       						required:true,
       						//日期必须合法 data:true;用于校验日期的合法性
       						date:true,
       						// 必须符合日期格式yyyy-MM-dd,dataISO:true,用于校验日期格式（yyyy-MM-dd）
       						dateISO:true
       						
       					},
       					//必须选择一项爱好
       					checkbox1:"required",
       					//电子邮箱必须填写，格式必须满足xxxx@xx.xxx(com)  xxxx@xxx.xxx.xx(com.cn)
       					email:{
       						//电子邮箱必须填写
       						required:true,
       						//格式必须满足邮箱格式 email:true;用于验证邮箱地址
       						email:true
       						
       					},
       					//身份证校验(15或18位)
       					/*
       					 * 1.必须填写
       					 * 2.长度是15或18位
       					 * 3.长度15位必须全是数字
       					 * 4.长度18位，前17位全是数字，最后一位是X
       					 */
       					card:{
       						// 1.必须填写
       						required:true,
       						//2.长度是15或18位
       						cardlength:[15,18],
       						//3.长度15位必须全是数字
       						card15:true,
       						// 4.长度18位，前17位全是数字，最后一位是X
       						card18:true
       						
       					}
       				
       				},
       				messages:{
       					realname:"昵称不能为空",
       					username:{
       						required:"姓名不能为空",
       						rangelength:"姓名字符长度在5--8之间"
       					},
       					//密码不能为空，长度在6--12个字符或数组
       					pwd:{
       						required:"密码不能为空",
       						rangelength:"密码长度在6---12之间"
       					},
       					//重置密码不能为空，长度在6--12个字符或数组，必须和密码一致
       					pwd2:{
       						required:"重复密码不能为空",
       						rangelength:"重复密码长度在6---12之间",
       						//和密码相同，通过equalTo("#id")
       						equalTo:"重复密码必须和密码相同"
       					},
       					gender:"性别（必选其一）",
       					//年龄 26--50岁
       					age:{
       						required:"年龄不能为空",
       						//年龄必须是整数
       						digits:"年龄必须为整数",
       						//年龄的范围26---50
       						range:"年龄的范围26---50之间"
       						
       					},
       					//必须选择一个学历
       					edu:"必须选择一个学历",
       					birthday:{
       						//必须填写 
       						required:"必须填写",
       						//日期必须合法 data:true;用于校验日期的合法性
       						date:"日期必须合法",
       						// 必须符合日期格式yyyy-MM-dd,dataISO:true,用于校验日期格式（yyyy-MM-dd）
       						dateISO:"必须符合日期格式yyyy-MM-dd"
       						
       					},
       					//必须选择一项爱好
       					checkbox1:"必须选择一项爱好",
       					//电子邮箱必须填写，格式必须满足xxxx@xx.xxx(com)  xxxx@xxx.xxx.xx(com.cn)
       					email:{
       						//电子邮箱必须填写
       						required:"电子邮箱必须填写",
       						//格式必须满足邮箱格式 email:true;用于验证邮箱地址
       						email:"格式必须满足xxxx@xx.xxx(com)  xxxx@xxx.xxx.xx(com.cn)"
       						
       					},
       					card:{
       						// 1.必须填写
       						required:"必须填写",
       						//2.长度是15或18位
       						cardlength:"身份证长度是15或18位",
       						//3.长度15位必须全是数字
       						card15:"长度15位必须全是数字",
       						// 4.长度18位，前17位全是数字，最后一位是X
       						card18:"长度18位，前17位全是数字，最后一位是X"
       						
       					}
       					
       				}
       			});
       		})
       	</script>
	</head>
	<body>
		<form id="empForm" method="post" action="#">
			昵称：<input type="text" name="realname" /><br/>
			姓名：<input type="text" name="username" /><br/>
			密码：<input type="password" name="pwd" id="pwd"/><br/>
			重置密码：<input type="password" name="pwd2" /><br/>
			性别：<input type="radio" value="m" id="gender_male" name="gender" /> 男&nbsp;
			<input type="radio" id="gender_female" value="f" name="gender" />女
			<label id="gender-error" genetated="true" class="error" for="gender" style="display: none;">性别（必选其一）</label>
			<br/>
			<!--<label id="gender-error" genetated="true" class="error" for="gender">性别（必选其一）</label>
				不满足校验规则，表单校验插件，就会定义一个label标签，标签中显示错误信息
				如果表单校验插件定义的label标签不符合我们的要求，就需要自己定义一个label标签
				让标签开始的时候处于隐藏状态。
				 for="gender":通过name的属性值gender规则校验标签
				 genetated="true"
				 写上：会自动加载messages中获取填写的错误信息
				 不写：会默认使用label标签中的错误提示信息
				
			-->
			年龄：<input type="text" name="age" id="age" /><br />
			学历：
			<select name="edu" id="edu">
				<option value="">请选择你的学历</option>
				<option value="a">专科</option>
				<option value="b">本科</option>
				<option value="c">研究生</option>
				<option value="d">硕士</option>
				<option value="e">博士</option>
			</select><br />
			出生日期(1999/08/21)：<input type="text" id="birthday" name="birthday" value="" /><br />
			兴趣爱好：<input type="checkbox" name="checkbox1" id="qq1" />&nbsp;旅游
			<input type="checkbox" name="checkbox1" id="qq2" />&nbsp;运动
			<input type="checkbox" name="checkbox1" id="qq3" />&nbsp;上网
			<input type="checkbox" name="checkbox1" id="qq4" />&nbsp;购物
			<input type="checkbox" name="checkbox1" id="qq5" />&nbsp;羽毛球
			<label id="checkbox1-error" generated="true" class="error" for="checkbox1" style="display: none;">必须选择一项爱好</label>
			<br />
			电子邮箱：<input type="text" name="email" id="email" /><br />
			身份证校验：<input type="text" name="card" id="card" /><br />
			<input type="submit" value="提交" />
		</form>
	</body>
</html>
